<template>
    <div class="main_container">
        <el-row style="padding: 20px 10% 5px 10%;">
            <el-col :span="8" style="display: flex;justify-content: center;align-items: center;">
                <span class="top_title">全部：</span>
                <span class="money" @click="getData('warn_inventory_union')" style="color: #0099ff;">{{ totalData.all }}</span>
            </el-col>
            <el-col :span="8" style="display: flex;justify-content: center;align-items: center;">
                <span class="top_title">超出：</span>
                <span class="money" @click="getData('warn_inventory_high')" style="color: #fe9216;">{{ totalData.beyond }}</span>
            </el-col>
            <el-col :span="8" style="display: flex;justify-content: center;align-items: center;">
                <span class="top_title">短缺：</span>
                <span class="money" @click="getData('warn_inventory_low')" style="color: red;">{{ totalData.below }}</span>
            </el-col>
        </el-row>
        <div class="common_line"></div>
        <el-table border :data="tableData" v-loading="loading" style="margin-top: 15px;">
            <el-table-column label="图片" align="center" width="100">
                <template slot-scope="scope">
                    <el-popover
                        placement="right"
                        width="240"
                        trigger="hover">
                        <img :src="scope.row.imageUrl" style="width: 240px;height: 240px;" alt="">
                        <img v-if="scope.row.imageUrl" slot="reference" :src="scope.row.imageUrl" style="width: 32px;height: 32px;" alt="">
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" show-overflow-tooltip min-width="100" prop="name" align="center" />
            <el-table-column label="商品编号" align="center" prop="goods_no" />
            <el-table-column label="单位" align="center" prop="unitName" />
            <el-table-column label="最低库存" align="center" prop="warn_inventory_num_low" />
            <el-table-column label="最高库存" align="center" prop="warn_inventory_num_high" />
            <el-table-column label="当前库存" align="center" prop="current_inventory_quantity" />
            <el-table-column v-if="showType!='warn_inventory_low'" label="超出" align="center" prop="warning_high" />
            <el-table-column v-if="showType!='warn_inventory_high'" label="短缺" align="center" prop="warning_low" />
        </el-table>
        <el-pagination
            v-show="total>0"
            background
            style="padding: 32px 16px;background: #fff;text-align: right;"
            @size-change="handleSizeChange"
            @current-change="getNextPageList"
            :current-page.sync="pageParam.page"
            :page-size="pageParam.num"
            layout="total, prev, pager, next, sizes, jumper"
            :page-sizes="[10, 20, 50, 100]"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { listProduct } from '@/api/product'
export default {
    name: 'stockwarning',
    data() {
        return {
            corp_id: '',
            loading: false,
            pageParam: {
                page: 1,
                num: 10
            },
            total: 0,
            totalLists: [],
            totalData: {
                all: 0,  //全部
                beyond: 0,  //超出
                below: 0  //短缺
            },
            showType: 'warn_inventory_union',
            tableData: []
        }
    },
    created() {
        this.corp_id = this.$store.state.corpId
        this.getData('warn_inventory_union')
    },
    methods: {
        getData(type) {
            let param = {
                corp: this.corp_id
            }
            this.$set(param, type, true)
            let that = this
            that.loading = true
            listProduct(param).then(res => {
                let beyond_count = 0, below_count = 0;
                let lists = res.data.data.good_list.filter(item => {
                    if (item.image_show && item.image_show.url){
                        item.imageUrl = item.image_show.url
                    }else{
                        item.imageUrl = 'https://anhuiyaoying.com/icon/default.png'
                    }
                    item.warn_inventory_num_high = parseFloat(item.warn_inventory_num_high)
                    item.warn_inventory_num_low = parseFloat(item.warn_inventory_num_low)
                    item.current_inventory_quantity = parseFloat(item.current_inventory_quantity)
                    if (item.current_inventory_quantity < item.warn_inventory_num_low){
                        item.warning_low = (item.warn_inventory_num_low-item.current_inventory_quantity)
                        below_count ++
                    }else if (item.current_inventory_quantity > item.warn_inventory_num_high){
                        item.warning_high = (item.current_inventory_quantity-item.warn_inventory_num_high)
                        beyond_count ++
                    }
                    item.unitName = item.unit_show?item.unit_show.name:''
                    return item
                })
                if (type == 'warn_inventory_union'){
                    this.totalData.all = below_count+beyond_count
                    this.totalData.below = below_count
                    this.totalData.beyond = beyond_count
                }
                that.totalLists = lists
                that.total = lists.length
                that.pageParam.page = 1
                that.getNextPageList()
                that.loading = false
            })
        },
        handleSizeChange(val) {
            this.pageParam.num = val
            this.getNextPageList()
        },
        getNextPageList() {
            let totalPage = 0  //总页数
            if (this.total % this.pageParam.num === 0){  //整除
                totalPage = Math.trunc(this.total / this.pageParam.num)
            }else{
                totalPage = Math.trunc(this.total / this.pageParam.num) + 1
            }

            function chunkArray(arr, size) {
                const result = [];
                for (let i = 0; i < arr.length; i += size) {
                    result.push(arr.slice(i, i + size));
                }
                return result;
            }

            if (this.pageParam.page <= totalPage){
                let groups = chunkArray(this.totalLists, this.pageParam.num)
                this.tableData = groups[this.pageParam.page-1]
            }else{
                this.tableData = []
            }
        },
    }
}
</script>

<style lang="less" scoped>
    @import '../../style/mixin.less';
    .top_title {
        font-size: 14px;
        color: #606266;
    }
    .money {
        font-size: 20px;
        cursor: pointer;
    }
</style>